<template>
  <div id="app">
    <div class="bili-dyn-home--member">
      <main class="dongtaimain">
        <section>
          <div class="bili-dyn-up-list">
            <div class="bili-dyn-up-list__window">
              <div class="bili-dyn-up-list__content" style="transform: translateX(0px);">
                <div class="bili-dyn-up-list__item active">
                  <div class="bili-dyn-up-list__item__face all"></div>
                  <div class="bili-dyn-up-list__item__name">全部动态</div>
                </div>
                <div v-for="user in userList" :key="user.userId" class="bili-dyn-up-list__item">
                  <a :href="zhuyeUrl+user.userId">
                    <el-avatar :size="50" :src="prefixUrl+user.userAvatar"></el-avatar>
                    <div class="bili-dyn-up-list__item__name bili-ellipsis">{{user.userName}}</div>
                  </a>
                </div>
              </div>
            </div>
            <div class="bili-dyn-up-list__shadow-right">
              <div class="shadow"></div>
              <div class="bili-dyn-up-list__next"></div>
            </div>
          </div>
        </section>
        <section>
          <div class="bili-dyn-list-tabs">
            <div class="bili-dyn-list-tabs__list">
              <div class="bili-dyn-list-tabs__item fs-medium active">全部</div>
              <div class="bili-dyn-list-tabs__item fs-medium">视频投稿</div>
              <div class="bili-dyn-list-tabs__item fs-medium">专栏</div>
            </div>
          </div>

          <div class="bili-dyn-list">
            <div class="bili-dyn-list__items">
              <div class="bili-dyn-list__item">
                <div class="bili-dyn-item">
                  <!---->
                  <div v-for="video in videoList" :key="video.videoId" class="bili-dyn-item__main">
                    <div class="bili-dyn-item__avatar">
                      <div
                        data-module="avatar"
                        class="bili-dyn-avatar"
                        style="width: 48px; height: 48px;"
                      >
                       
                        <div class="b-avatar" style="width: 48px; height: 48px;">
                          <div class="b-avatar__canvas" style="width: 64.8px; height: 64.8px;">
                            <div class="b-avatar__layers">
                              <div
                                class="b-avatar__layer center"
                                style="width: 48px; height: 48px; opacity: 1; border-radius: 50%;"
                              >
                                <div class="b-avatar__layer__res local-6">
                               
                                     <el-avatar :size="50" :src="prefixUrl+video.uploadUser.userAvatar"></el-avatar>
                                </div>
                              </div>
                              <div
                                class="b-avatar__layer"
                                style="left: 38.4px; top: 38.4px; width: 20px; height: 20px; opacity: 1; background-color: rgb(255, 255, 255); border: 2px solid rgb(255, 255, 255); border-radius: 50%; box-sizing: border-box;"
                              >
                                <div class="b-avatar__layer__res local-undefined local-3"></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="bili-dyn-item__header">
                      <div data-module="title" class="bili-dyn-title">
                        <span
                          class="bili-dyn-title__text bili-dyn-title__text fs-large default"
                        >{{video.uploadUser.userName}}</span>
                      </div>
                      <div>{{video.createTime.replace(/T/g, " ").replace(/.[\d]{3}Z/)}}</div>
                    </div>

                    <div class="bili-dyn-item__body">
                      <div class="bili-dyn-content">
                        <!---->
                        <!---->
                        <!---->
                        <div class="bili-dyn-content__orig">
                          <!---->
                          <!---->
                          <!---->
                          <div class="bili-dyn-content__orig__major suit-video-card">
                            <a
                              :href="videoUrl+video.videoId"
                              class="bili-dyn-card-video"
                              dyn-id="830697355673075746"
                            >
                              <div class="bili-dyn-card-video__header">
                                <!---->
                                <div class="bili-dyn-card-video__cover">
                                  <div class="b-img">
                                    <picture class="b-img__inner">
                                      <img
                                        :src="prefixUrl+video.videoCover"
                                        loading="lazy"
                                        onload="bmgOnLoad(this)"
                                        onerror="bmgOnError(this)"
                                        data-onload="bmgCmptOnload"
                                      />
                                    </picture>
                                  </div>
                                  <div class="bili-dyn-card-video__cover__mask">
                                    <div class="dyn-video-preview" style="display: none;">
                                      <div class="dyn-video-preview__progress">
                                        <div class="dyn-video-preview__progress__bar">
                                          <span style="width: 0%;"></span>
                                        </div>
                                      </div>
                                      <div class="dyn-video-preview__shot"></div>
                                      <div class="dyn-video-preview__danmaku"></div>
                                    </div>
                                    <div class="bili-dyn-card-video__mark">
                                      <div
                                        class="bili-dyn-card-video__mark__tip"
                                        style="display: none;"
                                      ></div>
                                    </div>
                                  </div>
                                  <div class="bili-dyn-card-video__cover-shadow">
                                    <div class="duration-time">{{video.videoLongth}}</div>
                                  </div>
                                </div>
                              </div>
                              <div class="bili-dyn-card-video__body">
                                <div
                                  class="bili-dyn-card-video__title bili-ellipsis fs-medium"
                                >{{video.videoTitle}}</div>
                                <!---->
                                <div class="bili-dyn-card-video__stat fs-small">
                                  <div class="bili-dyn-card-video__stat__item play">
                                    <i></i>
                                    <span>{{video.videoPlayTimes}}</span>
                                  </div>

                                  <div class="bili-dyn-card-video__stat__item danmaku">
                                    <i></i>
                                    <span>{{video.videoComments}}</span>
                                  </div>
                                </div>
                              </div>
                            </a>
                          </div>
                          <!---->
                        </div>
                        <!---->
                      </div>
                      <!---->
                    </div>
                    <div class="bili-dyn-item__footer">
                      <div class="bili-dyn-item__action">
                        <div
                          data-module="action"
                          data-type="forward"
                          class="bili-dyn-action forward"
                        >
                          <i class="bili-dyn-action__icon"></i>
                          转发
                        </div>
                      </div>
                      <div class="bili-dyn-item__action">
                        <div
                          data-module="action"
                          data-type="comment"
                          class="bili-dyn-action comment"
                        >
                          <i class="bili-dyn-action__icon"></i>
                          {{video.videoForward}}
                        </div>
                      </div>

                      <div class="bili-dyn-item__action">
                        <div data-module="action" data-type="like" class="bili-dyn-action like">
                          <i class="bili-dyn-action__icon"></i>
                          {{video.videoLike}}
                        </div>
                        <!---->
                      </div>
                      <!---->
                      <!---->
                    </div>
                  </div>
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: "dongtai",
  data() {
    return {
      videoList: "",
      loginUser: "",
      userList: [],
      zhuyeUrl: "/person/zhuye/",
      prefixUrl: "http://",
      videoUrl: "/videoplay/",
      total:'',
    };
  },

  created() {
    this.getLoginUser();


    
  },
  methods: {
    getVideoList() {
      // JSON.stringify(this.userList)
 
      this.axios({
        method: "post",
      
        data: {
         upList:JSON.stringify(this.userList)
        },
        url: "http://localhost:8094/video/getVideoListByUpIds"
      })
        .then(res => {
          this.videoList = res.data;
          this.total = res.data.total;
          console.log("this.videoList", this.videoList);
        })
        .catch(e => {
          this.$message.error(e.response.data.message);
        });
    },
    getLoginUser() {
      this.axios({
        method: "get",
        params: {},
        url: "http://localhost:8090/user/getLoginUser"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          this.loginUser = res.data;

          this.getUserListByUpUser(this.loginUser);
        })
        .catch(error => {
          //每一个页面都刷新时都会请求一次app.vue的created里面的方法
          this.$message.error(error.response.data.message);
        });
    },
    getUserListByUpUser(user) {
      this.axios({
        method: "get",
        
        params: {
          userId: user.userId,
          type: "upId"
        },
        url: "http://localhost:8090/user/getFansOrUPList"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          this.userList = res.data;
          this.getVideoList();
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    }
  }
};
</script>
<style   scoped>
@import "//s1.hdslb.com/bfs/static/stone-free/dyn-home/css/dyn-home.0.da23b90a1ccc19158d95566b7ec0c3560cf7d90e.css";
@import "//s1.hdslb.com/bfs/static/stone-free/dyn-home/css/dyn-home.1.da23b90a1ccc19158d95566b7ec0c3560cf7d90e.css";
.dongtaimain {
  width: 70%;
}
</style>